<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导出</title>
</head>

<!-- 引入公用部分 -->
<script th:replace="common/head::static"></script>
<script th:src="@{base/layui/2.6.7/layui_exts/excel.js(v=${version})}"></script>

<body>

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-inline" id="noteDate">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="note-startDate-1" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="note-endDate-1" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>

    </div>
    <div align="center">
        <button class="layui-btn layui-btn-primary" id="report-btn" i18n="save-btn" onclick="onExcel()">确认</button>
    </div>
</div>

</body>
<script>
    var layer;
    var element;
    var laydate;
    var excel;
    layui.use(['element', 'form', 'table', 'layer', 'laydate', 'tree', 'util', 'excel'], function () {
        layer = layui.layer;
        element = layui.element;
        laydate = layui.laydate;
        excel = layui.excel;

        //日期范围
        laydate.render({
            elem: '#noteDate'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , range: ['#note-startDate-1', '#note-endDate-1']
            // 选中后的回调
            , done: function (value, date) {
                // layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });

    })

    /**
     * layUI导出excel表格
     */
    function onExcel() {
        var startTime = $("#note-startDate-1").val();
        var endTime = $("#note-endDate-1").val();
        var url = '/n/v1/downloadData';
        $.ajax({
            type: "post",
            url: url,
            async: true,
            dataType:'JSON',
            data:{
                'startTime': startTime,
                'endTime': endTime
            },
            success:function(res) {
                //如果表字段顺序不对，可以先用excel.filterExportData()方法重新排序
                // data = excel.filterExportData(‘数据’，‘重组字段排序的数组’);
                //给导出数据添加表头，这里的排序必须跟上面的数据排序相互对应
                // data.unshift(‘表头数组排序’);
                //导出 data 导出的数据，name 导出名字  xls 后缀
                console.log(res)
                if (res.code = '0000') {
                    data = excel.filterExportData(res.data.tableNames, res.data.tableNames);
                    data.unshift(res.data.tableNames);
                    excel.exportExcel(res.data.notes, res.data.fileName, 'xlsx');
                }

            }
        });

    }


</script>
</html>